<template>
  <c-layout>
    <c-header>
      <c-launch></c-launch>
    </c-header>

    <c-main></c-main>

    <c-footer>
    </c-footer>
  </c-layout>
</template>
<script>
import { onMounted, reactive, toRefs } from "vue";
import {
  getRecommendatoryCategorys,
  getBanners,
  getBrandVideos,
} from "@/api/mall";
// import { HamburgerButton, MoreTwo, Search } from "@icon-park/vue-next";

export default {
  components: {
    // HamburgerButton,
    // MoreTwo,
    // Search,
  },
  setup() {
    const data = reactive({
      categoryList: [],
      swipeList: [],
      brandList: [{ list: [] }, { list: [] }],
    });

    onMounted(() => {
      getBanners().then((res) => {
        data.swipeList = res.data;
      });
      getRecommendatoryCategorys().then((res) => {
        data.categoryList = res.data;
      });
      getBrandVideos().then((res) => {
        data.brandList = res.data;
      });
    });

    const list = [
      {
        path: "/",
        text: "首页",
        active: true,
      },
      {
        path: "/",
        text: "商城",
      },
      {
        path: "/",
        text: "直播",
      },
      {
        path: "/",
        text: "我",
      },
    ];

    return {
      ...toRefs(data),
      list,
    };
  },
};
</script>
<style lang="scss" scoped>
@include b(search) {
  @include dimensions(265px, 30px);
  box-shadow: 0 0 2px #ff5777;
}

@include b(swiper) {
  overflow: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  @include e(item) {
    display: inline-block;
    width: 100%;
    scroll-snap-align: center;
  }
}

@include b(nav) {
  @include e(col) {
    width: 20%;
  }
  @include e(item) {
    flex-direction: column;
  }
  @include e(img) {
    @include dimensions(50px);
  }
}

@include b(good) {
  @include e(avatar) {
    @include dimensions(25px);
  }
}

@include b(footer) {
  & ::v-deep .c-foot-nav__text {
    height: 50px;
  }
}

@include b(menu) {
  @include position(fixed, bottom 60px right 10px);
  @include dimensions(50px);
}
</style>
